<template>
  <div>
    <h2>404</h2>
    <h3>很抱歉，访问不到该页面哦</h3>
    <p>
      将在<span>{{ num }}</span
      >秒后跳转回首页
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 3,
      timer: null,
    };
  },
  created() {
    this.timer = setInterval(() => {
      if (this.num < 1) {
        this.$router.push({
          path: "/",
        });
      }
      this.num--;
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="scss" scoped>
div {
  padding-top: 240px;
}
h2 {
  text-align: center;
  font-size: 36px;
}
h3 {
  text-align: center;
  letter-spacing: 4px;
  margin: 6px 0 8px;
}
p{
  text-align: center;
  span{
    margin: 0 4px;
    font-weight: bold;
  }
}
</style>